<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>留言页面</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div id="wrapper">
        <div class="comment">
          <ul class="message">
              <li>
                <p class="content">这里是留言板0</p>
              </li>
              <li>
                <p class="content">这里是留言板1</p>
              </li>
              <li>
                <p class="content">这里是留言板2</p>
              </li>
              <li>
                <p class="content">这里是留言板3</p>
              </li>
              <li>
                <p class="content">这里是留言板4</p>
              </li>
          </ul>
          <div class="sendMessageWrap">
              <textarea placeholder="输入留言内容..." id="messageContent"></textarea>
              <button id="sendMessage">发布留言</button>
          </div>
       </div>
    </div>
      <script src="jquery.min.js"></script>
      <script src="jquery-ui.min.js"></script>
      <script>
          $('#messageContent').on('focus',function(){
              //切换效果
              $('.message').toggle('blind',500);
              setTimeout(function(){
                $('textarea').animate({
                  height:'200px'
                },300)
              },500)
          })
          $('#sendMessage').on('click',function(){
            //百叶窗切换效果
            $('.message').toggle('blind',500)
          })
          $('#sendMessage').on('click',function(){
            //输入框高度还原
            $('textarea').animate({
              height:'80px'
            },300);
          })
          $('#sendMessage').on('click',function(){
            var $html = "<li><div class='content'>"+$('#messageContent').val()+"</div></li>";
            if($("#messageContent").val()!=''){
              setTimeout(function(){
                //显示到评论列表第一行
                $('.message').prepend($html);
                //当内容为空时，不能添加到留言区域
                $("textarea").val("");
              },1000)
            }
          })
      </script>
  </body>
</html>